<template xmlns:v-validate="http://www.w3.org/1999/xhtml">
  <div class="bc">
    <headImg></headImg>
    <div class="input-box">
      <div class="input-item">
      <img class="phone-img" v-show="phone.Number === ''" src="../../assets/img/login/user-click.png">
      <img class="phone-img" v-show="phone.Number !== ''" src="../../assets/img/login/user.png">
      <input class="input-phone" v-model="phone.Number" type="number" placeholder="请输入账号或手机号">
      <img class="phone-clear" @click="clearPhone" v-show="phone.Number !== ''"  src="../../assets/img/login/clear.png">
    </div>
      <div class="input-item pwd">
        <img class="pwd-img" v-show="pwd.Number !== ''" src="../../assets/img/login/pwd-click.png">
        <img class="pwd-img" v-show="pwd.Number === ''" src="../../assets/img/login/pwd.png">
        <input class="input-phone"  v-model="pwd.Number" type="password" placeholder="请输入密码" >
        <img class="phone-clear" @click="clearPwd" v-show="pwd.Number !== ''"  src="../../assets/img/login/clear.png">
      </div>
      <div class="input-button btn-small" @click="sendcode">登录</div>
      <div class="other">
        <router-link  to="/register/FORGETPWD"><span class="forget-password">忘记密码？</span></router-link>
        <router-link  to="/register/REGIST"> <span class="forget-register">注册账号>></span></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import headImg from '../head'
import { Toast } from 'vue-ydui/dist/lib.rem/dialog'
import { VXLOGIN } from '../../api/request'
import {setStorage, getStorage} from '../../util/Cookies'

export default {
  components: {headImg},
  data: function () {
    return {
      phone: {
        Number: ''
      },
      pwd: {
        Number: ''
      }
    }
  },
  methods: {
    clearPhone: function () {
      this.phone.Number = ''
    },
    clearPwd: function () {
      this.pwd.Number = ''
    },
    sendcode: function () {
      // dialog.toast('你点了确定', 'none', 1000);
      let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.phone.Number === '' || this.pwd.Number === '') {
        /* 正确提示框 */
        // dialog.toast('手机号或者密码不能为空', 'success', 1000)$router
        Toast({mes: '手机号或者密码不能为空', timeout: 1000})
        // alert('手机号或者密码不能为空')
      } else if (!reg.test(this.phone.Number)) {
        //  alert('请输入正确的手机号')
        Toast({mes: '请输入正确的手机号', timeout: 1000})
      } else if (this.pwd.Number.length < 6 || this.pwd.Number.length > 16) {
      //  alert('请输入6-16位的密码')
        Toast({mes: '请输入6-16位的密码', timeout: 1000})
      } else {
        VXLOGIN(this.pwd.Number, this.phone.Number).then(
          res => {
            if (res.data.code === 200) {
              this.$store.dispatch('updateUserId', res.data.uid)
              setStorage('updateUserId', res.data.uid)
              this.$router.replace({path: '/person'})
            } else {
              console.log(res.data.code)
              Toast({mes: res.data.msg, timeout: 500})
            }
          },
          error => {
            console.log(error)
          })
      }
    }
  }
}

</script>

<style scoped>
</style>
